<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}

			ul {
				width: 200px;
				background-color: lightgray;
				height: 35px;
				padding: 10px;
				display: none;
				position: fixed;
			}

			li {
				text-align: center;
				border: 2px solid black;
			}

			li:hover {
				background-color: blue;
			}

			span {
				position: fixed;
			}

		</style>
	</head>
	<body>
		<textarea name="" id="" cols="30" rows="10">
			今天天气不错, 挺风和日丽的!
		</textarea>
		<ul id="menu">
			<li>粘贴</li>
		</ul>
		
	</body>
</html>
<script>

	var textarea = document.querySelector("textarea");
	var txt = "";
	textarea.onselect = function() {
		console.log("选中了");

		// 获取选中区域的值
		txt = document.getSelection().toString();
		// console.log(txt);


	};

	var menu = document.getElementById('menu');
	
	document.oncontextmenu = function(e) {

		menu.style.display = "block";
		menu.style.left = e.clientX + 'px';
		menu.style.top = e.clientY + 'px';
		// console.log(e.clientX);

		// 阻止网页的默认行为
		return false;
	};

	// 利用冒泡
	document.onclick = function(e) {
		console.log(txt);
		// 判断点击的是不是menu元素
		if (e.target.id != "menu") menu.style.display = "none";

		if (e.target.innerHTML != "粘贴") return;
		
		var span = document.createElement('span');
		span.innerHTML = txt;
		span.style.color = randomColor();
		span.style.left = e.clientX + 'px';
		span.style.top = e.clientY + 'px';
		document.body.appendChild(span);
		
	};
			
	function randomColor() {
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return "rgb(" + r + "," + g + "," + b + ")";

	}






</script>